<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
            <span @click="select(2,$event)"
                  class="block positive"
                  :class="{'active':ratingSelectParm.selectType===2}">
                {{ratingSelectParm.desc.all}}<span class="count" v-if="ratings">{{ratings.length}}</span>
            </span>
            <span @click="select(0,$event)"
                  class="block positive"
                  :class="{'active':ratingSelectParm.selectType===0}">
                {{ratingSelectParm.desc.positive}}<span class="count" v-if="ratings">{{positives.length}}</span>
            </span>
            <span @click="select(1,$event)"
                  class="block negative"
                  :class="{'active':ratingSelectParm.selectType===1}">
                {{ratingSelectParm.desc.negative}}<span class="count" v-if="ratings">{{negatives.length}}</span>
            </span>
        </div>
        <div @click="toggleContent($event)" class="switch" :class="{'on':ratingSelectParm.onlyContent}">
            <i class="icon-check_circle"></i>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    const POSITIVE = 0;
    const NEGATIVE = 1;
    const ALL = 2;

    export default {
        props: {
            ratings: {
                type: Array,
                detail() {
                    return [];
                }
            },
            ratingSelectParm: {
                type: Object,
                default() {
                    return {
                        selectType: ALL,
                        onlyContent: false,
                        desc: {
                            all: '全部',
                            positive: '满意',
                            negative: '不满意'
                        }
                    }
                }
            }
        },
        computed: {
            positives() {
                return this.ratings.filter((rating) => {
                    return rating.rateType === POSITIVE;
                })
            },
            negatives() {
                return this.ratings.filter((rating) => {
                    return rating.rateType === NEGATIVE;
                })
            }
        },
        methods: {
            select(type, event) {
                if (!event._constructed) {
                    return;
                }
                this.ratingSelectParm.selectType = type;
            },
            toggleContent(event) {
                if (!event._constructed) {
                    return;
                }
                this.ratingSelectParm.onlyContent = !this.ratingSelectParm.onlyContent;
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../../common/stylus/mixin.styl"

    .ratingselect
        .rating-type
            padding 18px 0
            margin 0 18px
            border-1px(rgba(7, 17, 27, 0.1))

            .block
                display inline-block
                padding 8px 12px
                margin-right 8px
                line-height 16px
                border-radius 1px
                color rgb(77, 85, 93)
                font-size 12px

                &.active
                    color #fff

                .count
                    font-size 8px
                    margin-left 2px

                &.positive
                    background rgba(0, 160, 220, 0.2)

                    &.active
                        background rgb(0, 160, 220)

                &.negative
                    background rgba(77, 85, 93, 0.2)

                    &.active
                        background rgb(77, 85, 93)

        .switch
            padding 12px 18px
            line-height 24px
            border-bottom 1px solid rgba(7, 17, 27, 0.1)
            color rgb(147, 153, 159)
            font-size 0

            &.on
                .icon-check_circle
                    color #00c850

            .icon-check_circle
                display inline-block
                vertical-align top
                margin-right 4px
                font-size 24px

            .text
                font-size 12px
</style>
